<template>
	<view class="tablet">
		<u-toast ref="uToast" />
		<view class="tablet_img">
			<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/guanlianshebei.png" mode=""></image>
		</view>
		<view class="title-names">
			<!-- <text class="vue-number-names">请使用[我的设备]扫码添加设备</text> -->
			<view style="width: 440rpx;">请在下框中输入平板电脑的设备sn或点击下面扫一扫图标对准平板电脑上我的设备二维码进行扫码绑定</view>
		</view>
		<view class="vue-input box box-pack-between">
			<input v-model="snCode" placeholder="请输入12位设备码" />
			<view class="scanCode" @click="gotoScanCode">
				<image src="https://jiaoguanyi008.oss-cn-shenzhen.aliyuncs.com/miniPro/images/imgs/scan.png" mode=""></image>
			</view>
		</view>
		<view class="vue-button">
			<button type="button" class="button" @click="getbindParentSn">绑定设备</button>
		</view>
	</view>
</template>

<script>
	import {
		bindParentSn,
		getFlatIsSuccess
	} from '@/api/addTablet.js'
	const CryptoJS = require('../../utils/pubic.js')
	export default {
		data() {
			return {
				snCode: ''
			}
		},
		methods: {
			//扫码
			gotoScanCode() {
				uni.scanCode({
					success: res => {
						// console.log('--------',CryptoJS.Decrypt(res.result),CryptoJS.Decrypt(res),res)
						uni.navigateTo({
							// url: '/pages_subpackage/addTablet/scanTablet/index?result=' + CryptoJS.Decrypt(res.result)
							url: '/pages_subpackage/addTablet/scanTablet/index?result=' + res.result
						});
					}
				})
			},
			//绑定平板
			getbindParentSn() {
				if (this.snCode == '') return this.$refs.uToast.show({
					title: '请先输入设备码或扫描平板的二维码',
					type: 'error '
				})
				let qs = {
					snCode: this.snCode
				}
				bindParentSn(qs).then(res => {
					this.snTimeout();
				}).catch(err => {
					this.$refs.uToast.show({
						title: err.msg,
						type: 'error',
						icon: false
					})
				})
			},
			//定时任务,获取平板的确认消息，30秒-每次5秒一次请求
			snTimeout() {
				uni.showLoading({
					title: "加载中"
				});
				let that = this;
				var num = 0;
				var num2 = 0;
				var max = 5;
				var max2 = 30;

				function time2() {
					num2++;
					if (num2 < max2) {
						setTimeout(time2, 1000);
					} else {
						if (num2 == 30) {
							uni.showToast({
								title: "请重试",
								icon: "none",
								duration: 1500
							});
						}
					}
				}
				setTimeout(time2, 1000);

				function time() {
					num++;
					if (num < max) {
						setTimeout(time, 1000);
					} else {
						getFlatIsSuccess({
							sn: that.snCode
						}).then(res => {
							num2 = 30;
							that.$refs.uToast.show({
								title: '绑定设备成功',
								icon: false,
								type: 'success',
								isTab: true,
								url: '/pages/my/index'
							})
						}).catch(err => {
							that.$refs.uToast.show({
								title: '请在平板上点击确认绑定',
								icon: false,
								type: 'warning',
							})
							if (num2 < max2) {
								setTimeout(time, 1000);
							}
						})
						num = 0;
					}
				}
				setTimeout(time, 1000);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tablet {
		width: 100%;
		height: 100vh;
		// background-image: -webkit-linear-gradient(90deg, #4b74e6 0%, #8a56e9 100%);
		background-color: #FFFFFF;
		color: #FFFFFF;

		image {
			height: 100%;
			width: 100%;
		}

		.tablet_img {
			position: absolute;
			left: 50%;
			top: 35%;
			transform: translate(-50%, -50%);
			width: 438rpx;
			height: 297rpx;
		}

		.title-names {
			height: 30rpx;
			margin: auto;
			position: absolute;
			width: 100%;
			top: 55%;
			text-align: center;
			font-size: 24rpx;
			line-height: 40rpx;
			letter-spacing: 2rpx;
			color: #000000;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.vue-input {
			height: 100rpx;
			margin: auto;
			margin-top: 30px;
			width: 90%;
			left: 5%;
			position: absolute;
			bottom: 160rpx;
			line-height: 100rpx;
			border-radius: $uni-border-radius-lg;
			font-size: 32rpx;
			background-color: #e2e2e2;
			line-height: 60rpx;
			color: #333333;
			letter-spacing: 2rpx;
			overflow: hidden;

			input {
				height: 100rpx;
				border: none;
				background-color: #e2e2e2;
				color: #333333;
				padding-left: 20rpx;
			}

			.scanCode {
				padding: 20rpx;
				width: 100rpx;
			}
		}

		.vue-button {
			position: absolute;
			height: 100rpx;
			bottom: 40rpx;
			width: 90%;
			left: 5%;
			border: none;
			margin: auto;
			overflow: hidden;
			text-align: center;

			.button {
				height: 100rpx;
				margin: 0 auto;
				line-height: 100rpx;
				font-size: 36rpx;
				overflow: hidden;
				background-color: #4880ff;
				letter-spacing: 4rpx;
				border: none;
				border: 2rpx solid #4880ff;
				border-radius: $uni-border-radius-lg;
				color: #FFFFFF;
			}
		}
	}
</style>
